<template>
  <zlst-ele-layout class="resource-list">
    <!-- 头部 -->
    <div slot="zlst-ele-header__search">
      <h3 class="title"><span>分组管理</span></h3>
      <el-button class="operate-button" type="primary" icon="el-icon-plus" @click="showDialog('add')">新增分组</el-button>
    </div>
    <div slot="zlst-ele-header__filter">
      <div class="right-content">
        <el-button class="operate-button" style="float: right;position: relative; top: 7px;margin-left: 10px" type="primary" @click="query(true)">搜索</el-button>

        <el-input v-model.trim="queryObj.searchValue" class="search-input" placeholder="请输入分组名称" />

      </div>
    </div>
    <div slot="zlst-ele-container__main__content">
      <el-dialog
        :title="title"
        :visible.sync="dialogShow"
        width="30%"
      >
        <el-form :rules="rules" :model="form">
          <el-form-item prop="groupName" label="分组名称" required>
            <el-input v-model="form.groupName" placeholder="请输入分组名称" />
          </el-form-item>
          <el-form-item prop="groupDesc" label="描述">
            <el-input v-model="form.groupDesc" placeholder="请输入描述" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="groupList"
      >
        <el-table-column label="编号" prop="groupNo" />
        <el-table-column label="分组名称" prop="groupName" />
        <el-table-column label="描述" prop="groupDesc" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" :disabled="row.disabled" @click="deleteRow(row.id)">删除</el-button>
            <el-button type="text" @click="showDialog('edit',row)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <template slot="zlst-ele-footer">
      <el-pagination
        :current-page.sync="queryObj.currPage"
        :page-sizes="[10, 20, 40, 60, 80]"
        :page-size.sync="queryObj.pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="query"
        @current-change="query"
      />
    </template>

  </zlst-ele-layout>
</template>

<script>
import { getGroups, addGroup, renameGroup, deleteGroup } from '@/api/server/groups'
import { cloneDeep } from 'lodash'
export default {
  data() {
    return {
      queryObj: {
        currPage: 1,
        pageSize: 20,
        searchValue: ''
      },
      total: 0,
      listLoading: false,
      groupList: [],
      dialogShow: false,
      type: 'add',
      title: '',
      rules: {
        groupName: [
          { required: true, message: '请输入分组名称', trigger: ['blur', 'change'] }
        ]
      },
      form: {}
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    reset() {
      this.dialogShow = false
      this.form = {}
    },
    async save() {
      try {
        if (this.type === 'add') {
          await addGroup(this.form)
        } else {
          await renameGroup(this.form)
        }
        this.$message.success('操作成功！')
        this.dialogShow = false
        this.query(true)
      } catch (e) {
        console.log(e)
      }
    },
    showDialog(type, row) {
      this.type = type
      this.dialogShow = true
      this.title = type === 'add' ? '新增卡片分组' : '编辑卡片分组'
      row && (this.form = cloneDeep(row))
    },
    async query(init) {
      try {
        this.listLoading = true
        if (init) {
          this.queryObj.currPage = 1
        }
        const res = (await getGroups(this.queryObj)).data
        this.groupList = res.list
        this.total = res.totalCount
      } catch (e) {
        console.log(e)
      } finally {
        this.listLoading = false
      }
    },
    async deleteRow(id) {
      try {
        await this.$confirm('删除该卡片分组后，属于该分组的卡片将归属于未分类分组,是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deleteGroup({ id })
        this.$message.success('操作成功！')
        this.query()
      } catch (e) {
        console.log(e)
      }
    },
    edit() {}
  }
}
</script>

<style scoped lang="scss">

</style>
